<template>
  <div class="userUserInfo">
    <pageTitle :data="titleData" />
    <div class="formBox">
      <myInformation />
    </div>
    <pageTitle :data="otherTitleData" />
    <div class="formBox">
      <studentInfo />
    </div>
    <!-- <el-collapse v-model="activeNames">
      <el-collapse-item name="1">
        <template slot="title">
          <div class="title">个人</div>
          <div class="controlIcon">
            <img :src="require('@/assets/images/donwIcon.png')" />
          </div>
        </template>
      </el-collapse-item>
    </el-collapse> -->
    <!-- <el-collapse v-model="activeNames">
      <el-collapse-item name="2">
        <template slot="title">
          <div class="title">班级</div>
          <div class="controlIcon">
            <img :src="require('@/assets/images/donwIcon.png')" />
          </div>
        </template>
      </el-collapse-item>
    </el-collapse> -->
  </div>
</template>

<script>
const myInformation = () => import("./userInfoForm/myInformation");
const studentInfo = () => import("./userInfoForm/studentInfo");
const pageTitle = () => import("@/views/user/user/component/pageTitle");
import { mapState } from "vuex";
export default {
  components: {
    pageTitle,
    myInformation,
    studentInfo,
  },
  data() {
    return {
      activeNames: ['1', '2'],
      titleData: {
        name: "详细资料",
        showProblem: true,
      },
      otherTitleData: {
        name: "学业信息",
        showProblem: false,
      },
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
  },
};
</script>

<style lang="stylus">
.userUserInfo {
  flex: 1;
   padding: 23px 95px 0 63px

  .title {
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: Segoe UI;
    font-size: 22px;
    color: #666666;

    .problem {
      cursor: pointer;
      position: relative;
      margin-top: 18px;
      font-family: Segoe UI;
      font-size: 14px;
      color: #b0b0b0;

      i {
        font-size: 15px;
      }
    }
  }

  .formBox {
    padding-top: 13px;
    padding-left: 99px;

    // padding-right: 358px;
    .el-form {
      .el-form-item {
        margin-bottom: 16px;

        .el-form-item__label::before {
          content: none;
          display: none;
        }

        .el-form-item__content {
          .el-input {
            width: 300px;

            .el-input__inner {
              height: 30px;
            }
          }
        }
      }
    }
  }

  .el-collapse {
    border: none;

    .el-collapse-item {
      .el-collapse-item__header {
        height: 112px;
        border-top: solid 1px #dcdbdb;
        border-bottom: 1px solid rgba(255, 255, 255, 0);
        transition: all 0.3s linear;

        // border: solid 1px rgba(112, 112, 112, 0.4);
        // border-bottom: none;
        .title {
          margin: 0;
          font-family: Segoe UI;
          font-size: 18px;
          color: #909090;
        }

        .controlIcon {
          user-select: none;
          margin: 0 0 0 auto;
          transition: all 0.3s linear;
        }

        .el-collapse-item__arrow {
          display: none;
        }
      }

      .is-active {
        // height: 49px;
        .controlIcon {
          transform: rotate(180deg);
        }
      }

      .el-collapse-item__wrap {
        border: none;

        .el-collapse-item__content {
          padding-top: 13px;
          padding-left: 99px;

          // padding-right: 358px;
          .el-form {
            .el-form-item {
              margin-bottom: 16px;

              .el-form-item__label::before {
                content: none;
                display: none;
              }

              .el-form-item__content {
                .el-input {
                  width: 300px;

                  .el-input__inner {
                    height: 30px;
                  }
                }
              }
            }
          }
        }
      }
    }

    .is-active {
      .el-collapse-item__header {
        border-bottom: dashed 1px rgba(112, 112, 112, 0.4);
      }
    }
  }
}
</style>